In the previous lesson, we saw an example of a system dialogue when being prompted to select a download
location.
So in this lesson, we'll take a closer look at creating our own custom dialogues for various purposes.
The Dialogue API is a standalone module on electron.
So step one is requiring that module from electron dialogue or lowercase.
Then with the dialogue module available, I'll create the demonstration dialogues once all of the main
windows content is done loading.
So as before main window dot web content on did finish load.
Passing this event, a callback, the first type of dialogue is the open dialogue, as the name suggests,
this allows the user to select one or more files from their computer to create an open dialogue.
We can call on the dialogue module, show open dialogue as the first argument of this method we can
pass at the browser window on which to create the dialogue main window.
Second argument is an options object.
This having a number of options to manually customize the dialogue.
I'll set the button label to select a photo and the default path to open this dialogue worth as my home
directory using up dot get path for home, that will do for now.
So next to get the file path that was selected, this function returns a promise.
I'll again resolve that directly on the function calling then with a callback in which we can access
the result, result being an object that we'll see in a second.
So log that out.
And immediately, as the countdown is loaded, that open dialogue is shown with my home directory being
the default path we're presented with as per the configuration we passed from this dialogue, I can
then navigate to my desktop, select this photo I've saved from the place, get in service or just cancel
before I go ahead and actually proceed to open a file.
Note that this dialogue is presented as part of the main window, almost the same as a child window.
This being as we passed main window into the show open dialogue method as the first argument, meaning
show this dialogue on main window.
The first argument is optional, however.
So to create a dialogue as its own standalone window, we can remove the first argument.
Save again.
And now this is no longer attached to the main window, functioning, completely independent, still
defaulting to my home directory, which again, we can very simply change on that default path parameter,
for example, desktop.
Which opens the dialogue to my desktop path.
Go ahead and select this photo, click select this photo, which is essentially just a relabelled open
button that dismisses the dialogue.
And in the terminal, we see an array of selections.
In this case, that one photo, don't worry about this warning here.
You every so often see warnings related to the native sys APIs used by electron, but they get addressed
in updates.
So being able to get the path to this file is great.
But we can further customize their open dialogues behavior by setting some specific properties in this
configuration.
Object set properties, which takes an array of property values.
I'll add multi select meaning allow for multiple files to be selected.
Create Directory a MAC specific option for allowing the dialogue to create a new directory and having
specified some properties, we now also have to explicitly set the default behavior of selecting a single
file only as we just did.
And lastly, open directory to allow us to select an entire directory.
Save this.
The dialogue has shown this time having a new button in the bottom left new folder as a result of setting
the creative option, click that which presents us with a new dialogue to name the directory we are
creating.
I'll call it photos and we see the new directory appear on my desktop.
Duplicate this photo and move them into that directory.
Where we can now either select the entire directory like this or by holding the command key, select
multiple files, confirm the opening of these two photos, check the terminal.
And this time we have two paths in the callback array, one for each photo selected.
OK, the next dialog I'll show is the safe dialogue comment.
This one out still in the did finish load event say dialogue dot show save dialogue.
First argument again being an instance of a browser window or leaving it empty for a standalone dialogue.
Then as an options object I'll leave this empty.
Also resolve the return promise with then in which we can again access a result object telling us whether
the dialogue was canceled or which path was selected exactly the same as the open dialogue.
I log this out as before.
And we get this very basic dialogue to set a file name at a given path, I'll make the file name a new
photo dot PMG Save.
Which logs out that safe path to the terminal, there's always being a single path only as it's intended
for specifying a single resource path.
The logic for actually writing the data to this file name being a completely separate task, of course,
something we'll have to implement on an app specific basis.
Finally, I'll demonstrate the message box dialogue, this being a dialogue for either presenting the
user with a simple message or to prompt a choice from some custom button options.
This time calling dialogue show message box.
Same as all the other dialogues.
We have the option to assign this to a specific browser window.
I'll admit that again, setting a configuration object with the dialogue title message box.
A message of please select an option.
Some detail to this message, should it require further explaining to the user?
And finally, should you want to provide the user some custom options to choose from a buttons option,
this being an array of button options or answers, create that array.
Consed answers equals an array worth, yes, no, and maybe these options can be anything, of course.
Then finally, to read the user selection from these buttons, we can resolve the returned promise with
then accessing in that resolvers callback as before the result object on which we can get the index
of the selected button with the response property logging out, user selected on the answers array the
button at the index of that response parameter result dot response.
We get a simple dialogue with those three custom buttons, note the order of these buttons in the array
being the primary, here is the first button in the array, the secondary button in the second array
item.
And finally, any remaining buttons are created here.
We only have the one select one of these options.
I'll say maybe check the terminal and their user selected.
Maybe that's where we leave the dialogue module.
For now, we do have one more option to create an alert dialog, but that's a pretty straightforward
message without any interactions.
In the next lesson, we'll see how to create system wide keyboard shortcuts for your app.